import { defineComponent, CSSProperties, toRefs, PropType } from 'vue';
import { cn } from '@/lib/utils';

// 波纹背景

interface RippleProps {
  mainCircleSize?: number;
  mainCircleOpacity?: number;
  numCircles?: number;
  className?: string;
  rippleColor?: string;
}

const Ripple = defineComponent({
  name: 'Ripple',
  props: {
    mainCircleSize: {
      type: Number,
      default: 210,
    },
    mainCircleOpacity: {
      type: Number,
      default: 0.5,
    },
    numCircles: {
      type: Number,
      default: 8,
    },
    className: {
      type: String,
      default: '',
    },
    rippleColor: {
      type: String,
      default: '#ff4081',
    },
  },
  setup(props: RippleProps) {
    const { mainCircleSize, mainCircleOpacity, numCircles, className, rippleColor } = toRefs(props);

    const generateRipple = () => {
      const ripples = [];
      for (let i = 0; i < numCircles.value; i++) {
        const size = mainCircleSize.value + i * 70;
        const opacity = mainCircleOpacity.value - i * 0.05;
        const animationDelay = `${i * 0.06}s`;
        const borderStyle = i === numCircles.value - 1 ? 'dashed' : 'solid';
        const borderOpacity = 5 + i * 5;

        const rippleStyle: CSSProperties = {
          width: `${size}px`,
          height: `${size}px`,
          opacity,
          animationDelay,
          borderStyle,
          borderWidth: '1px',
          borderColor: rippleColor.value,
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%) scale(1)',
        };

        ripples.push(
          <div
            key={i}
            class={`absolute animate-ripple rounded-full shadow-xl border [--i:${i}]`}
            style={rippleStyle}
          />
        );
      }
      return ripples;
    };

    return () => (
      <div
        class={cn(
          'pointer-events-none select-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)]',
          className.value
        )}
      >
        {generateRipple()}
      </div>
    );
  },
});

Ripple.displayName = 'Ripple';

export default Ripple;
